第二十三章、燃燒吧！Three.js 小宇宙！(壹)

第 12 屆 iThome 鐵人賽

DAY 24

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 24 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-10-09 14:35:39

2200 瀏覽

分享至

前言

嗨各位鐵人們今天好，相信到了今天，對於網頁動畫特效一定有許多收穫了對嗎？不過在個技術隨時在更新的時代，如果只會基礎 CSS 動畫或原生 JavaScript 動畫似乎是無法在這競爭的環境生存了。

「可是...這一次...我、我們已經...用盡全力了...現在已經...一無所有了...」
「你在說什麼傻話，鐵人們，你們才不是一無所有呢！你們不是還有 Three.js 嗎？」

為了向崇高的動畫女神獻上榮耀，接下來的幾天就讓我們來 燃燒吧！電腦引擎！

簡介

Three.js 是一個非常方便的 JavaScript 函式庫，他將一些 webGL 上的操作包裝成較為簡易的 API，方便開發者輕鬆入門。

Three.js 將大量功能封裝成物件導向的方法和屬性，可以非常方便的使用物件導向的開發模式繪製 3D 空間，因此，不熟悉物件導向的鐵人們歡迎先去閱讀我們面幾篇文章喔～

而 Three.js 近幾年來也被廣泛運用在於網頁互動上

參考網站

參考網站

那麼就讓我們來聊聊這些做出厲害網站的技術吧！

WebGL

WebGL 是基於 OpenGL 設計的渲染3D及2D圖像的 JavaScript API，且它不需要安裝任何套件，而是直接透過 canvas tag 來引入 WebGL。

<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

接著我們在 JavaScript 內準備 WebGL 環境

function main() {
  // 選取 Canvas 元素
  const canvas = document.querySelector("#glCanvas");
  // 建立 WebGl 環境
  const gl = canvas.getContext("webgl");

  // 當 WebGL 無效有效就會停止執行
  if (gl === null) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }

  // 設定清除色為黑色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 透過清除色來清除色彩緩衝區
  gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;

不過要注意的是，瀏覽器對於 WebGL 是有支援限制的：

因此在開發之前，可以透過這個 WebGL支援度網站來查詢一下瀏覽器支援度呦。

Three.js

那麼 Three.js 又是什麼呢？他其實有點類似 3D 網頁的 Jquery，透過將許多功能封裝好之後的 API 讓我們可以輕鬆使用其內建的強大功能。由於它具有輕量化的特質，因此很適合使用在一些小型網頁專案。

Three.js 基礎簡易概念

我們要在網頁上渲染出 3D 圖形，大致上是這樣：

建立三維空間
告訴瀏覽器我們要繪製 3D 圖形了，在 Three.js 中稱之為 Scene
建立透視點
設定使用者的觀測方向與角度等等，在 Three.js 中稱之為 Camera
在環境中建立元素
Three.js 中的物體元素有很多種，諸如 Mesh、Line、Points 等，它們都繼承於Object3D，在 Three.js 中稱之為 Objects
將繪製好的元素渲染到指定的區域
當我們把元素、光源、相機設定好後，就可以選染環境了，在 Three.js 中稱之為 Renderer